<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="App"></div>
    <script>
        const app = {
            type:"ul",
            props:{
                class:"Box",
                children:[
                    {
                        type:"li",
                        props:{
                            class:"li_1",
                            children:[
                                "漫威",
                                {
                                    type:"p",
                                    props:{
                                        children:["钢铁侠"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["黑豹"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["惊奇队长"],
                                        class:"p_1"
                                    }
                                }
                            ]
                        }
                    },
                    {
                        type:"li",
                        props:{
                            class:"li_1",
                            children:[
                                "DC",
                                {
                                    type:"p",
                                    props:{
                                        children:["蝙蝠侠"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["神奇女侠"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["海王"],
                                        class:"p_1"
                                    }
                                }
                            ]
                        }
                    },
                    {
                        type:"li",
                        props:{
                            class:"li_1",
                            children:[
                                "二龙湖",
                                {
                                    type:"p",
                                    props:{
                                        children:["浩哥"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["二哥"],
                                        class:"p_1"
                                    }
                                },
                                {
                                    type:"p",
                                    props:{
                                        children:["蓝百万"],
                                        class:"p_1"
                                    }
                                }
                            ]
                        }
                    },
                    
                ]
            }
        }

  
        const render = (jsx,root) =>{
            //封装递归创建元素方法
            const createElement = (jsx,parent) =>{
                //定义占位符
                let cur = null
                //如果他是字符串 直接创建 否则 展开循环
                if (typeof jsx === "string") {
                    cur = document.createTextNode(jsx)
                } else {
                    let {type,props} = jsx
                    //如果他有type直接创建 
                    cur = document.createElement(type)
                    //添加点击事件
                    cur.addEventListener('click', function(e) {
                        console.log(e.target.children);
                        //阻止事件冒泡
                        e.stopPropagation();
                        //伪数组变为真数组  1. [... xxxx]  Array.from(xxx)
                        //展开循环判断
                        [...e.target.children].map(item=>{
                            if (item.style.display == 'block'|| item.style.display == '') {
                                item.style.display = 'none'
                            }else {
                                item.style.display = 'block'
                            }
                        })
                    })     
                    //通过 Object.keys() 获取键值对 也就是key    
                    Object.keys(props).map(item =>{
                        switch (item) {
                            case "class":
                                cur.setAttribute('class',props[item])
                                break;
                            case "children":
                                if (Array.isArray(props.children)) {
                                    props.children.map(val=>{
                                        //递归调用
                                        createElement(val,cur)
                                    })
                                }
                                break;
                        }
                    })
                }
                //追加到body
                parent.append(cur)
            }
            createElement(jsx,root)
        }
        render(app,document.querySelector("#App"))

  </script>
</body>
</html>